<template>
  <Navigation id="scrollRef"></Navigation>

  <!-- 骨架屏 -->
  <Skeleton v-if="loading"></Skeleton>

  <scroll-view class="scroll-view" scroll-y :refresher-enabled="true" @scrolltoupper="scrolltoupper"
    @scrolltolower="scrolltolower" v-if="!loading">
    <lyBanner :list="bannerList" />
    <Classfy />
    <Recommend :list="recommendist" />
    <!-- 猜你喜欢 -->
    <lyGuessLike :list="guessLikedist" />
    <!-- 底部加载更多 -->
    <view v-if="total > 0 && loading || total <= page * 10" class="botton-loading">
      {{ total >= page * 10 ? '加载中...' : '~已经到底了~' }}
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue';
import lyBanner from "@/components/lyBanner/lyBanner.vue";
import Navigation from "./components/Navigation.vue";
import Classfy from "./components/Classfy.vue";
import Recommend from "./components/Recommend.vue";
import lyGuessLike from "@/components/lyGuessLike/lyGuessLike.vue";
import Skeleton from "./components/Skeleton.vue";
import { getHomeBanner, getHomeMutli, getHomeGuessLike, } from "@/api/home/index";
import type { bannerItem, recommendItem, guessLikeItem, pageItem } from '@/types/home';
import { onLoad } from '@dcloudio/uni-app';

const bindClick = () => { };
let bannerList = ref<bannerItem[]>([])
let recommendist = ref<recommendItem[]>([])
let guessLikedist = ref<guessLikeItem[]>([])
let page = ref<number>(1)
let total= ref<number>(0) // 猜你喜欢总数
let loading = ref<Boolean>(false)



// 获取分类列表
const getBannerData = async () => {
  let res = await getHomeBanner<bannerItem[]>({ distributionSite: 1 })

  bannerList.value = res.result
};

// 获取分类列表
const getHomeRecommend = async () => {
  let res = await getHomeMutli<recommendItem[]>()

  recommendist.value = res.result

};


// 获取猜你喜欢数据
const getHomeGuessLikeData = async () => {
   
  let res = await getHomeGuessLike<pageItem<guessLikeItem>>({
    page: page.value,
    pageSize: 10
  })

  total.value = res.result.counts
  guessLikedist.value = res.result.items

   
}

onLoad(async () => {
  loading.value = true
  await getBannerData()
  await getHomeRecommend()
  await getHomeGuessLikeData()
  loading.value = false
})

 
 

// 滚动顶部
const scrolltoupper = async () => {
  page.value = 1
  await getBannerData()
  await getHomeRecommend()
  await getHomeGuessLikeData()
}

// 滚动底部
const scrolltolower = () => {
   
  page.value++
  getHomeGuessLikeData()
  
}

</script>
<style lang="scss">
// 页面样式
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  // height: 100%;
  flex: 1;
}

.botton-loading {
    display: flex;
    justify-content: center;
    font-size: 36rpx;
    height: 60rpx;
    line-height: 60rpx;
}

</style>
